<mat-card class="form-card" [ixUiSearch]="searchableElements.elements.kmip">
  @if (isLoading()) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }
  <mat-card-content>
    <ix-fieldset [title]="'KMIP Key Status' | translate">
      <div class="key-status">
        @if (isSyncPending()) {
          <div>
            <ix-icon
              class="key-pending"
              name="mdi-progress-clock"
            ></ix-icon>
            <span>{{ 'Pending Sync' | translate }}</span>
          </div>
        }
        @if (!isKmipEnabled()) {
          <div>
            <ix-icon
              class="key-disabled"
              name="mdi-sync-off"
            ></ix-icon>
            <span>{{ 'Disabled' | translate }}</span>
          </div>
        }
        @if (!isSyncPending() && isKmipEnabled()) {
          <div class="key-syncing">
            <ix-icon
              class="key-syncing"
              name="mdi-check-circle-outline"
            ></ix-icon>
            <span>{{ 'Synced' | translate }}</span>
          </div>
        }
      </div>
    </ix-fieldset>

    <div class="keys-actions">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        ixTest="sync-keys"
        [disabled]="!isSyncPending()"
        (click)="onSyncKeysPressed()"
      >
        {{ 'Sync Keys' | translate }}
      </button>
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        ixTest="clear-sync-keys"
        [disabled]="!isSyncPending()"
        (click)="onClearSyncKeysPressed()"
      >
        {{ 'Clear Sync Keys' | translate }}
      </button>
    </div>

    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset [title]="'KMIP Server' | translate">
        <div class="columns">
          <div class="column">
            <ix-input
              formControlName="server"
              [label]="'Server' | translate"
              [tooltip]="helptext.server.tooltip | translate"
            ></ix-input>
          </div>
          <div class="column">
            <ix-input
              formControlName="port"
              type="number"
              [label]="'Port' | translate"
              [tooltip]="helptext.port.tooltip | translate"
            ></ix-input>
          </div>
        </div>
      </ix-fieldset>
      <ix-fieldset [title]="'Certificate' | translate">
        <div class="columns">
          <div class="column">
            <ix-with-manage-certificates-link>
              <ix-select
                formControlName="certificate"
                [label]="'Certificate' | translate"
                [tooltip]="helptext.certificate.tooltip | translate"
                [options]="certificates$"
              ></ix-select>
            </ix-with-manage-certificates-link>
          </div>
          <div class="column"></div>
        </div>
      </ix-fieldset>
      <ix-fieldset [title]="'Management' | translate">
        @if (allowSedManage()) {
          <ix-checkbox
            formControlName="manage_sed_disks"
            [label]="'Manage SED Passwords' | translate"
            [tooltip]="helptext.manageSedDisks.tooltip | translate"
          ></ix-checkbox>
        }
        <ix-checkbox
          formControlName="manage_zfs_keys"
          [label]="'Manage ZFS Keys' | translate"
          [tooltip]="helptext.manageZfsKeys.tooltip | translate"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="enabled"
          [label]="'Enabled' | translate"
          [tooltip]="helptext.enabled.tooltip | translate"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="change_server"
          [label]="'Change Server' | translate"
          [tooltip]="helptext.changeServer.tooltip | translate"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="validate"
          [label]="'Validate Connection' | translate"
          [tooltip]="helptext.validate.tooltip | translate"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="force_clear"
          [label]="'Force Clear' | translate"
          [tooltip]="helptext.forceClear.tooltip | translate"
        ></ix-checkbox>
      </ix-fieldset>

      <div class="form-actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
